<template>
	<view class="answcard relative">
		<view class="col">
			<view class="card-head space-between hor-center">
				<view class="user space-between">
					<view class="headimg">
						<img class="logo" src="" />
					</view>
					<view class="name">
						{{answ.name}}
					</view>
				</view>
				<view class="thin">
					<u-icon name="list" size="24" color="#878787"></u-icon>
				</view>
			</view>
			<view class="content-text">
				<u-text :lines="3" :text="answ.content" color="#000" size="14" :bold="true"></u-text>
			</view>
			<view class="card-bottom hor-center space-between">
				<view class="time">
					2022/5/8 11:37
				</view>
				<view class="act space-between">
					<view class="space-between hor-center">
						<u-icon name="thumb-up" size="24" color="#b0b0b0"></u-icon>
						<span>12</span>
					</view>
					<view class="space-between hor-center">
						<u-icon name="chat" size="24" color="#b0b0b0"></u-icon>
						<span>12</span>
					</view>
					<u-icon name="share-square" size="24" color="#89d2bc"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "answer-card",
		data() {
			return {

			};
		},
		props: {
			answ: Object
		}
	}
</script>

<style lang="scss" scoped>
	.answcard {
		padding: 2vh 4vw;
		border-radius: 2vw;
		-moz-border-radius: 2vw;
		-webkit-border-radius: 2vw;
		background-color: #fff;
		margin: 1vh 0;
	}

	.answcard::before {
		position: absolute;
		bottom: 100%;
		left: 5%;
		border-left: 6px solid #fff;
		border-right: 6px solid #fff;
		border-bottom: 13px solid #fff;
		content: "";
		width: 0;
		height: 0;

	}

	.card-head {
		padding-right: 2vw;
	}

	.user {
		height: 4vh;
		align-items: center;
		margin: 2vw 0;
		font-size: 13px;
		color: #878787;
	}

	.headimg {
		width: 20px;
		height: 20px;
		background-color: #61c2b7;
		border-radius: 50%;
		margin-right: 2vw;
	}

	.thin {
		width: 0.35rem;
		overflow-x: hidden;
	}

	.content-text {
		margin: 1vh 0;
	}

	.card-bottom {
		font-size: 13px;
		color: #888;
		margin-top: 1vh;
	}

	.time {
		color: #888;
	}

	.act {
		width: 40%;
	}
</style>
